<template>
  <div class="page">
    <data-box ref="databox" :params="params" :server="servers.handle" @resetForm="resetPhone" row-key="custName" :defaultParams="defaultParams" showExpend>
      <!--输入区域-->
      <template slot="mustShowInput">
        <el-form-item label="客户姓名" v-role="0x010202" prop="custName">
          <el-input v-model="params.custName"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="cupoPhone" :rules="[validate.truePhoneRules()]" v-role="0x010211">
          <el-input v-model="params.cupoPhoneX" @change="PhoneFormat" :maxlength="13"></el-input>
        </el-form-item>
      </template>
      <template slot="input">
        <el-form-item label="机构" prop="deptCode" v-role="0x010213">
          <el-cascader v-model="params.deptCodes" :options="orgNameList" @change="getcupoName" :props="{value:'deptCode',label:'name'}" change-on-select :show-all-levels="false" clearable></el-cascader>
        </el-form-item>
        <el-form-item label="催收员" v-role="0x010208" prop="cupoName">
          <el-input v-model="params.cupoName" v-if="params.deptCode===''"></el-input>
          <el-select v-model="params.cupoName" placeholder="请选择" clearable v-else>
            <el-option v-for="{userId,realName} in orgCuponameList" :key="userId" :label="realName" :value="realName">
            </el-option>
          </el-select>
        </el-form-item>
        <div class="inline-box">
          <el-form-item label="案件金额" v-role="0x010203" prop="cupoAmtMin" :rules="[
            { validator: validate.validateMin(params.cupoAmtMax), trigger: 'blur' }
          ]">
            <el-input v-model.number="params.cupoAmtMin" type="number" :min="0" :max="params.cupoAmtMax"></el-input>
          </el-form-item>
          <el-form-item label="-" v-role="0x010203" prop="cupoAmtMax" :rules="[
            { validator: validate.validateMax(params.cupoAmtMin), trigger: 'blur' }
          ]">
            <el-input v-model.number="params.cupoAmtMax" type="number" :min="params.cupoAmtMin"></el-input>
          </el-form-item>
        </div>
        <el-form-item label="还款状态" v-role="0x010204" prop="cupoPaystatus">
          <el-select v-model="params.cupoPaystatus" placeholder="请选择" clearable>
            <el-option v-for="{id,name} in this.$helper.getTypeCode('0033')" :key="id" :label="name" :value="name">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="批次号" v-role="0x010206" prop="cupoBatch">
          <el-input v-model="params.cupoBatch"></el-input>
        </el-form-item>
        <el-form-item label="状态" v-role="0x010209" prop="cupoStatus">
          <el-select v-model="params.cupoStatus" placeholder="请选择" clearable>
            <el-option v-for="{id,name} in this.$helper.getTypeCode('0018')" :key="id" :label="name" :value="id">
            </el-option>
          </el-select>
        </el-form-item>
        <div class="inline-box">
          <el-form-item label="逾期天数" v-role="0x010205" prop="overDayMin" :rules="[
            { validator: validate.validateMin(params.overDayMax), trigger: 'blur' }
          ]">
            <el-input v-model.number="params.overDayMin" type="number" :min="0"></el-input>
          </el-form-item>
          <el-form-item label="-" v-role="0x010205" prop="overDayMax" :rules="[
            { validator: validate.validateMax(params.overDayMin), trigger: 'blur' }
          ]">
            <el-input v-model.number="params.overDayMax" type="number" :min="0"></el-input>
          </el-form-item>
        </div>
        <div class="inline-box">
          <el-form-item label="还款金额" v-role="0x010210" prop="cupoPaynumMin" :rules="[
            { validator: validate.validateMin(params.cupoPaynumMax), trigger: 'blur' }
          ]">
            <el-input v-model.number="params.cupoPaynumMin" type="number" :min="0"></el-input>
          </el-form-item>
          <el-form-item label="-" v-role="0x010210" prop="cupoPaynumMax" :rules="[
            { validator: validate.validateMax(params.cupoPaynumMin), trigger: 'blur' }
          ]">
            <el-input v-model.number="params.cupoPaynumMax" type="number" :min="0"></el-input>
          </el-form-item>
        </div>
        <el-form-item label="委托方" v-role="0x010207" prop="prinId">
          <el-select v-model="params.prinId" placeholder="请选择" clearable>
            <el-option v-for="{index,prinId,prinName} in dataName" :key="index" :label="prinName" :value="prinId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="身份证" prop="cupoIdcard" v-role="0x010212" :rules="[
      { message: '请输入正确的身份证号', trigger: 'blur', pattern:/(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$)|(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)/}]">
          <el-input v-model="params.cupoIdcard"></el-input>
        </el-form-item>
      </template>
      <template slot="column">
        <!--数据列区域-->
        <el-table-column type="selection" width="30">
        </el-table-column>
        <el-table-column type="index" label="序号" width="30">
        </el-table-column>
        <el-table-column prop="cupoCasenum" label="案件编号 " min-width="90" sortable>
        </el-table-column>
        <el-table-column prop="custName" label="客户姓名" min-width="60">
          <!--<template scope="scope">
            <span>{{scope.row.custName | encryptName}}</span>
          </template>-->
        </el-table-column>
        <el-table-column prop="cupoPhone" label="手机号 " min-width="75">
          <template scope="scope">
            <span>{{scope.row.cupoPhone | encryptPhone}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="cupoIdcard" label="身份证" min-width="80">
          <template scope="scope">
            <span>{{ scope.row.cupoIdcard | encryptIDCard }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="cupoAmt" label="案件金额(元) " min-width="100" sortable>
        </el-table-column>
        <el-table-column prop="cupoPaystatus" label="还款状态 " min-width="60">
        </el-table-column>
        <el-table-column prop="cupoOverday" label="逾期天数 " min-width="75" sortable>
        </el-table-column>
        <el-table-column prop="cupoBatch" label="批次号 " min-width="85" sortable>
        </el-table-column>
        <el-table-column prop="cupoPrincipal" label="委托方 " min-width="70">
        </el-table-column>
        <el-table-column prop="cupoName" label="催收员 " min-width="55">
        </el-table-column>
        <el-table-column prop="cupoStatus" label="状态 " min-width="80">
          <template scope="scope">
            <span>{{scope.row.cupoStatus | typeCodeConvert('0018')}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="cupoPaynum" label="还款金额(元) " min-width="100" sortable>
        </el-table-column>
        <el-table-column prop="cupoStyle" label="还款方式 " min-width="75">
          <template scope="scope">
            <span>{{scope.row.cupoStyle | typeCodeConvert('0027')}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="cupoDate" label="处理日期 " min-width="90" sortable>
        </el-table-column>
        <el-table-column label="操作" min-width="60">
          <template scope="scope">
            <el-button @click="caseInstructClick(scope)" type="text" size="small" v-role="0x010201" v-if="scope.row.cupoStatus===60">结案说明</el-button>
          </template>
        </el-table-column>
      </template>
    </data-box>
  </div>
</template>
<script>
  import DataBox from '@/components/DataBox'
  import server from '@/config/servers'
  import net from '@/util/net'
  import { validateMin, validateMax, truePhoneRules, mobileFormatting } from '@/util/common'
  import { mapState, mapActions } from 'vuex'

  export default {
    name: 'call-handled-case',
    data() {
      return {
        // 服务接口列表
        servers: {
          handle: server.CallAcc.handled_case
        },
        // 定义请求参数
        params: {
          custName: '',
          caseAmt: '',
          overdueDays: '',
          cupoBatch: '',
          prinId: '',
          cupoName: '',
          cupoStatus: '',
          cupoPaystatus: '',
          cupoPaynumMin: '',
          cupoPaynumMax: '',
          cupoPhone: '',
          cupoPhoneX: '',
          cupoIdcard: '',
          cupoAmtMin: '',
          cupoAmtMax: '',
          deptCodes: [],
          deptCode: ''
        },
        orgNameList: [],
        orgCuponameList: [],
        defaultParams: {
          cupoRectype: '69',
          sort: 'cupoDate,desc'
        },
        validate: {
          validateMin,
          validateMax,
          truePhoneRules
        },
        multipleSelection: [],
        dataName: []
      }
    },
    activated() {
      this.$refs['databox'].refresh()
    },
    computed: {
      ...mapState({
        update: state => state.callAcc.update_time,
        deptInfo: state => state.callAcc.dept_info
      })
    },
    watch: {
      update() {
        this.$refs['databox'].refresh()
      },
      deptInfo() {
        this.getOrgNameList()
      }
    },
    methods: {
      ...mapActions([
        'updateDepartmentNameInfo'
      ]),
      /**
       * 获取组织名称列表
       */
      getOrgNameList() {
        let data = this.deptInfo.map(v => Object.assign({}, v))
        let fun = (id) => {
          // 递归对象子元素
          let list = data.filter(x => x.pid === id).map(node => {
            // 递归构建子节点
            let children = fun(node.deptId)
            if (children && children.length) {
              node.children = children
            }
            return node
          })
          return list
        }
        // 生成数据树
        this.orgNameList = fun(this.$store.state.user.departments[0].deptId)
      },
      /**
       * 根据部门获取催收员
       */
      getcupoName() {
        this.params.cupoName = ''
        if (this.params.deptCodes.length > 0) {
          this.params.deptCode = this.params.deptCodes[this.params.deptCodes.length - 1]
          net.send({
            server: server.CallAcc.get_user_controller,
            data: {
              deptCode: this.params.deptCode
            }
          }).then((data) => {
            this.orgCuponameList = data
          }, err => {
            this.$message({
              type: 'info',
              message: err.reason
            })
          })
        } else {
          this.params.deptCode = ''
        }
      },
      /**
       * 手机号重置
       */
      resetPhone() {
        this.params.cupoPhoneX = ''
        this.params.deptCodes = []
      },
      /**
       * 手机号格式设置(xxx-xxxx-xxxx)
       */
      PhoneFormat() {
        this.params.cupoPhoneX = mobileFormatting(this.params.cupoPhoneX.replace(/-/g, ''))
        // 取消'-'格式
        this.params.cupoPhone = this.params.cupoPhoneX.replace(/-/g, '')
      },
      /**
       * 结案说明
       */
      caseInstructClick(scope) {
        this.$alert(scope.row.cupoRemark, '结案说明', {
          confirmButtonText: '确定'
        })
        this.caseInstructFlag = true
      }
    },
    mounted() {
      this.updateDepartmentNameInfo()
      net.send({
        server: server.ApprovalManage.get_all_pricipal,
        data: this.$route.path
      }).then((data) => {
        // 接口返回的数据
        this.dataName = data
      })
    },
    components: {
      DataBox
    }
  }

</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .inline-box {
    display: inline-block;
    vertical-align: top;
  }

</style>
